<template>
  <div class="empty">
    <image class="empty-img"
           v-if="showIcon"
           :src="emptyImg"></image>
    <text class="empty-text">{{labelText}}</text>
    <text class="empty-text">{{hintText}}</text>
    <text class="btn-text"
          v-if="showButton"
          @click="buttonClicked">{{btnText}}</text>
  </div>
</template>
<script>
export default {
  props: {
    type: {
      type: String,
      default: 'empty'
    },
    emptyText: {
      type: String,
      default: '什么都没有~'
    },
    errorText: {
      type: String,
      default: '嗯？出错了~'
    },
    hintText: String,
    showButton: {
      type: Boolean,
      default: false
    },
    btnText: {
      type: String,
      default: '刷新一下'
    },
    showIcon: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    labelText() {
      const map = new Map()
      map.set('empty', this.emptyText)
      map.set('error', this.errorText)
      return map.get(this.type) || ''
    },
    emptyImg() {
      const map = new Map()
      map.set('empty', 'bmlocal://assets/common_icon_empty.png')
      map.set('error', 'bmlocal://assets/common_icon_error.png')
      return map.get(this.type) || ''
    }
  },
  data() {
    return {}
  },
  created() { },
  methods: {
    buttonClicked() {
      this.$emit('buttonClicked', {})
    }
  }
}
</script>
<style lang="scss" scoped>
.empty {
  padding: 50px;
  align-items: center;
}
.empty-img {
  width: 200px;
  height: 200px;
  margin: 20px;
}
.empty-text {
  color: #999;
  font-size: 28px;
  margin-bottom: 15px;
}
.btn-text {
  height: 52px;
  line-height: 52px;
  padding-left: 30px;
  padding-right: 30px;
  font-size: 24px;
  color: #999;
  border-width: 1px;
  border-color: #dee2e6;
  border-radius: 26px;
  margin-top: 20px;
}
</style>
